<template>
    <div class="imgDeleteDialog">
        <el-dialog v-el-drag-dialog v-if="delObj.show" title="提示" :visible.sync="delObj.show" :width="dialogWidth"
            top="10vh" :before-close="handleClose">
            <div class="row del_content row_start">

                <div class="del_left pt20">
                    <span>删除方式：</span>
                    <el-radio-group v-model="type">
                        <el-radio :label="0">删除检查</el-radio>
                        <el-radio :label="1">删除序列</el-radio>
                        <el-radio :label="2">删除影像</el-radio>
                    </el-radio-group>
                    <div class="patient_info">
                        <p class="fw500 mb5">
                            <span>{{ delObj.data.other_patient_name ? delObj.data.other_patient_name :
                                delObj.data.patient_name
                            }}</span>
                            <span class="ml20">{{ delObj.data.patient_sex | sex }}</span>
                            <span class="ml20">{{
                                delObj.data.patient_age | age }}</span>
                        </p>

                        <div class="patient_info_msg">
                            <div class="patient_info_msg_item">
                                <div class="mb5 row_start_center"><span class="label-title">患者编号：</span>
                                    <el-tooltip placement="top" :disabled="tooltipShouldDisabled(delObj.data.patient_id)">
                                        <div slot="content">{{ delObj.data.patient_id }}</div>
                                        <div class="patient_info_msg_item-content" :title="delObj.data.patient_id">{{
                                            delObj.data.patient_id }}</div>
                                    </el-tooltip>
                                </div>
                                <div class="row_start_center"><span class="label-title">检查编号：</span>
                                    <el-tooltip placement="top"
                                        :disabled="tooltipShouldDisabled(delObj.data.accession_number)">
                                        <div slot="content">{{ delObj.data.accession_number }}</div>
                                        <div class="patient_info_msg_item-content">{{
                                            delObj.data.accession_number }}</div>
                                    </el-tooltip>
                                </div>
                            </div>
                            <div class="patient_info_msg_item">
                                <div class="mb5 row_start_center"><span class="label-title">出生日期：</span>
                                    <el-tooltip placement="top"
                                        :disabled="tooltipShouldDisabled(convertBirthday(delObj.data.modalities_in_study))">
                                        <div slot="content">{{ delObj.data.patient_birth_date | birthday }}</div>
                                        <div class="patient_info_msg_item-content">{{ delObj.data.patient_birth_date |
                                            birthday
                                        }}</div>
                                    </el-tooltip>
                                </div>
                                <div class="row_start_center"><span class="label-title">检查类型：</span>
                                    <el-tooltip placement="top"
                                        :disabled="tooltipShouldDisabled(delObj.data.modalities_in_study)">
                                        <div slot="content">{{ delObj.data.modalities_in_study }}</div>
                                        <div class="patient_info_msg_item-content">{{
                                            delObj.data.modalities_in_study }}</div>
                                    </el-tooltip>
                                </div>

                            </div>

                            <div class="patient_info_msg_item">
                                <div class="mb5 row_start_center"><span class="label-title">检查时间：</span>
                                    <el-tooltip placement="top"
                                        :disabled="tooltipShouldDisabled(delObj.data.study_date_time)">
                                        <div slot="content">{{ delObj.data.study_date_time }}</div>
                                        <div class="patient_info_msg_item-content">{{
                                            delObj.data.study_date_time }}</div>
                                    </el-tooltip>
                                </div>
                                <div class="row_start_center"><span class="label-title">检查描述：</span>
                                    <el-tooltip placement="top"
                                        :disabled="tooltipShouldDisabled(delObj.data.study_description)">
                                        <div slot="content">{{ delObj.data.study_description }}</div>
                                        <div class="patient_info_msg_item-content">{{ delObj.data.study_description }}</div>
                                    </el-tooltip>
                                </div>

                            </div>
                        </div>

                    </div>
                    <div class="data_info" v-if="type != 0">
                        <div class="series_class">
                            <div class="mb5 mt5">序列（{{ series_count }}）</div>
                            <el-table :data="seriesData" border ref="seriesTable"
                                :header-cell-style="{ background: '#F5F5F5', color: '#333' }" :height="serieHeight"
                                highlight-current-row @row-click="seriesRowClickFn" @select="seriesRowSignleSelection"
                                @select-all="seriesRowTableAllSelection" :row-key="getRowKey"
                                header-row-class-name="strong">

                                <el-table-column v-if="type == 1" type="selection"
                                    :reserve-selection="true"></el-table-column>
                                <el-table-column label="序列编号" width="100" align="center" prop="series_number">
                                </el-table-column>
                                <el-table-column label="序列时间" width="160" prop="series_date_time"
                                    align="center"></el-table-column>
                                <el-table-column label="序列描述" prop="series_description" align="center"></el-table-column>
                                <el-table-column label="影像数量" width="80" prop="images_count"
                                    align="center"></el-table-column>

                            </el-table>
                        </div>
                        <div class="imgs_class" v-if="type == 2">
                            <div class="mt5 mb5">影像（{{ images_count }}）
                                <div class="num_range">
                                    <el-input v-model="minNum" :disabled="imagesData.length == 0"
                                        placeholder="请输入"></el-input> ~
                                    <el-input v-model="maxNum" :disabled="imagesData.length == 0"
                                        placeholder="请输入"></el-input>
                                    <el-button class="ml10" type="select_button" :disabled="imagesData.length == 0"
                                        @click="selectImageWithRangeFn">选中</el-button>
                                </div>
                            </div>
                            <el-table :data="imagesData" border ref="imageTable"
                                :header-cell-style="{ background: '#F5F5F5', color: '#333' }" :height="imageHeight"
                                highlight-current-row @row-click="imagesRowClickFn" @select="imagesRowSignleSelection"
                                @select-all="imagesRowTableAllSelection" :row-key="getRowKey"
                                header-row-class-name="strong">

                                <el-table-column type="selection" :reserve-selection="true"></el-table-column>
                                <el-table-column label="影像编号" width="100" align="center" prop="instance_number">
                                </el-table-column>
                                <el-table-column label="影像实例" prop="sop_instance_uid" align="center"></el-table-column>


                            </el-table>
                        </div>
                    </div>

                    <div class="del_bottom pb10 pt10" v-if="type == 0">
                        <el-form ref="pwdForm" :model="formData" :rules="rules" :inline="true">
                            <!-- <div class=" mt10"> -->
                            <el-form-item label="账号：" prop="name">
                                <el-input style="width: 200px;" size="small" type="text" :disabled="true"
                                    v-model="formData.name"></el-input>
                            </el-form-item>
                            <el-form-item class="pwd_class" label="密码：" style="margin-right: 0px;" prop="delPass">
                                <el-input style="width: 200px;" size="small" type="password" placeholder="请输入密码" clearable
                                    v-model="formData.delPass"></el-input>
                            </el-form-item>
                            <!-- <el-form-item label="原因：" class="mt10" prop="reason">
                                <el-input style="width: 493px;" size="small" type="textarea" :rows="2" placeholder="请输入删除原因"
                                    clearable v-model="formData.reason"></el-input>
                            </el-form-item> -->
                        </el-form>


                    </div>
                </div>
                <div class="del_middle">&nbsp;</div>
                <div class="del_right pt20" v-if="type != 0">
                    <div class="img_title">{{ type == 1 ? '序列' : '影像' }}图片</div>
                    <div class="del_right_img">
                        <el-image v-if="imgSrc" class="w280" :style="imageStyle" :src="imgSrc" fit="contain"
                            @click="toImgViewerPage(curSeriesData)">
                            <div slot="error" class="image-slot w100 h100 position_relative">
                                <i v-if="seriesData.id" class="imgLoadFail position_absolute toCenter"></i>
                                <i v-else class="noImg position_absolute toCenter"></i>
                            </div>
                        </el-image>
                        <el-image v-else class="w280 " :style="imageStyle" fit="contain" src="noImg">
                            <div slot="error" class="image-slot w100 h100 position_relative">
                                <i class="noImg position_absolute toCenter"></i>
                            </div>
                        </el-image>
                    </div>
                    <div class="del_bottom ">
                        <el-form ref="pwdForm" :model="formData" :rules="rules" :inline="true">
                            <div class="row  mt5">
                                <el-form-item label="账号：" prop="name">
                                    <el-input style="width: 215px;" size="small" type="text" :disabled="true"
                                        v-model="formData.name"></el-input>
                                </el-form-item>
                            </div>
                            <div>
                                <el-form-item label="密码：" class="mt3" prop="delPass">
                                    <el-input style="width: 215px;" size="small" type="password" placeholder="请输入密码"
                                        clearable v-model="formData.delPass"></el-input>
                                </el-form-item>
                            </div>
                            <!-- <div>
                                <el-form-item label="原因：" class="mt5" prop="reason">
                                    <el-input style="width: 215px;" size="small" type="textarea" :rows="2"
                                        placeholder="请输入删除原因" clearable v-model="formData.reason"></el-input>
                                </el-form-item>
                            </div> -->
                        </el-form>


                    </div>

                </div>



            </div>
            <span slot="footer" class="dialog-footer">
                <span class="fl footer_select_title"
                    v-if="(type == 1 && seriesCurrentTableChecked.length > 0) || type == 2 && imagesCurrentTableChecked.length > 0">已选中
                    {{ type == 1 ? seriesCurrentTableChecked.length : imagesCurrentTableChecked.length }}
                    {{ type == 1 ? '个序列' : '幅影像' }}</span>
                <el-button size="small" @click="handleClose">取消</el-button>
                <el-button size="small" type="primary" @click="handleSure">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
    data() {
        return {
            setObj:{},
            minNum: '',
            maxNum: '',
            dialogWidth: '610px',
            profile: {},
            type: 0,
            formData: {
                delPass: '',
                name: '',
                reason: '',

            },
            rules: {

                delPass: [{ required: true, message: '请输入用户密码', trigger: 'blur' },],
                name: [{ required: true, message: '请输入用户名', trigger: 'blur' },],
                // reason: [{ required: true, message: '请输入删除理由', trigger: 'blur' },],

            },
            seriesCurrentTableChecked: [],
            imagesCurrentTableChecked: [],

            seriesData: [],
            imagesData: [],
            imgSrc: null,
            curSeriesData: {},
            series_count: 0,
            images_count: 0,
            serieHeight: '215px',
            imageHeight: '215px',
            imageStyle: { height: '295px' },

        };
    },
    props: ['delObj'],
    computed: {
        ...mapGetters(['loginInfo']),
    },
    mounted() {
         this.setObj = JSON.parse(localStorage.getItem('setObj')) || JSON.parse(localStorage.getItem('setPacsObj')) || {}

        this.profile = JSON.parse(this.loginInfo).profile
        this.formData.name = this.profile.name
    },
    watch: {
        'minNum': {
            handler(val) {
                if (val) {
                    this.minNum = val ? val.toString().replace(/\D/g, '') : ''
                }

            }
        },

        'maxNum': {
            handler(val) {
                if (val) {
                    this.maxNum = val ? val.toString().replace(/\D/g, '') : ''
                }

            }
        },

        'type': {
            handler(val) {
                if (val > 0) {
                    this.dialogWidth = '910px'
                    this.imageHeight = '200px'
                    this.serieHeight = val == 1 ? '300px' : '215px'
                    this.imageStyle = val == 1 ? { height: '347px' } : { height: '502px' }
                    if (val == 1) {
                        this.seriesCurrentTableChecked = []
                        this.getSeriesInfo(this.delObj.data.id)
                    }

                    if (val == 2) {
                        //切换至影像模式、默认选中第一个序列
                        this.seriesCurrentTableChecked = []
                        this.getSeriesInfo(this.delObj.data.id)

                    }
                } else {
                    this.dialogWidth = '610px'
                }
            }
        },
    },
    methods: {
        checkTime(i) {
            if (i < 10) {
                i = "0" + i;
            }
            return i;
        },


        convertBirthday(date, args) {
            let dateObj = new Date(date)
            var year = dateObj.getFullYear(),
                month = dateObj.getMonth() + 1,
                day = dateObj.getDay(),

                month = this.checkTime(month),
                day = this.checkTime(day);
            return year + '-' + month + '-' + day
        },
        tooltipShouldDisabled(val) {
            if (!val) return true
            if (val.length > 11) {
                console.log('大于11', val);
                return false
            }
            return true
        },

        selectImageWithRangeFn() {
            if (Number(this.maxNum) < Number(this.minNum)) {
                // console.log('什么类型哦', typeof(this.maxNum),typeof(this.minNum))
                // console.log('最大编号小于最小编号', this.maxNum, this.minNum,this.maxNum < this.minNum);
                this.$message.error('编号范围有误，请重新填写', 'msg')
                return
            }
            // if (this.imagesData.length == 0) {
            //     this.$message.error('该序列无影像数据、不支持编号选中','msg')
            //     return 
            // }

            // this.imagesData.sort((a,b)=>Number(a.instance_number||0))
let firstItem =   this.imagesData.find(item => item.instance_number)
            if (Number(firstItem.instance_number) > Number(this.minNum)) {

                // console.log('最小编号小于最小影像编号', this.minNum,firstItem);

                this.$message.error('编号范围有误，请重新填写', 'msg')
                return
            }
            let arr = JSON.parse(JSON.stringify(this.imagesData))
            let lastItem =   arr.reverse().find(item => item.instance_number)

            if ( Number(lastItem.instance_number) < Number(this.maxNum)) {
                // console.log('最大编号大于最大影像编号', this.minNum);

                this.$message.error('编号范围有误，请重新填写', 'msg')
                return
            }
            // this.imagesData.reverse()

            //默认选中对应数据哦

            let waitSelectedData = this.imagesData.filter(item => item.instance_number >= this.minNum && item.instance_number <= this.maxNum)
            this.imagesCurrentTableChecked = []
            this.$nextTick(() => {
                this.$refs.imageTable.clearSelection()
            })
            this.$nextTick(() => {
                this.imagesCurrentTableChecked = waitSelectedData

                waitSelectedData.forEach(item => {
                    this.$refs.imageTable.toggleRowSelection(item, true)
                })
            })
        },

        handleClose() {
            this.$emit('delDialogClose')

        },
        async handleSure() {
            if (this.type > 0) {
                if (this.seriesCurrentTableChecked.length == 0) {
                    this.$message.error('请选择需要删除的序列！', 'msg')
                    return
                }
            }

            if (this.type == 2) {
                if (this.imagesCurrentTableChecked.length == 0) {
                    this.$message.error('请选择需要删除的影像！', 'msg')
                    return
                }
            }
            this.$refs.pwdForm.validate((result) => {
                console.log('结果呢？', result);
                if (result) {
                    this.checkPwd()
                }
            })


        },

        async checkPwd() {
            const params = {
                user_name: this.profile.phone_number,
                password: this.$getRsaCode(this.formData.delPass)
            }

            const res = await this.$pacsApi.pacsApi.checkPassword(params)
            if (res.code === 0) {
                this.$emit('checkPasswordSuccess')
                this.handleDelete()
            } else {
                this.$message.error(res.msg)
            }

        },
        handleDelete() {
            let series_delete_dtos = []

            if (this.type == 0) {
                //默认删除检查哦
            } else if (this.type == 1) {
                //删除序列
                series_delete_dtos = this.seriesCurrentTableChecked.map(e => ({ "series_instance_uid": e.series_instance_uid }));
            } else if (this.type == 2) {
                console.log('影像数据没有哦', this.imagesCurrentTableChecked);
                let sop_instancs_ui_ds = this.imagesCurrentTableChecked.map(e => (e.sop_instance_uid));
                //删除检查
                series_delete_dtos = this.seriesCurrentTableChecked.map(e => ({ "series_instance_uid": e.series_instance_uid, sop_instancs_ui_ds }));
            }

            const params = {
                "delete_type": this.type,
                "accession_number": this.delObj.data.accession_number,
                "study_instance_uid": this.delObj.data.study_instance_uid,
                series_delete_dtos,
            };

            this.$emit('delDialogClose', 'confirm', params)


        },

        getRowKey(row) {
            return row.id
        },
        imagesRowClickFn(row) {

            if (row.imgSrc) {
                this.imgSrc = row.imgSrc
            } else {
                this.imgSrc = null
                this.getInstanceImg(row)
            }
            if (this.imagesCurrentTableChecked.includes(row)) {
                this.imagesCurrentTableChecked = this.imagesCurrentTableChecked.filter(item => item != row)
                this.$nextTick(() => {
                    this.$refs.imageTable.toggleRowSelection(row, false)
                })
            } else {
                this.imagesCurrentTableChecked.push(row)
                this.$nextTick(() => {
                    this.$refs.imageTable.toggleRowSelection(row, true)
                })
            }

        },
        imagesRowSignleSelection(rows) {
            this.imagesCurrentTableChecked = rows

        },
        imagesRowTableAllSelection(rows) {
            this.imagesCurrentTableChecked = rows

        },
        seriesRowClickFn(row) {
            //获取对应影像

            if (this.type == 1) {
                if (row.imgSrc) {
                    this.imgSrc = row.imgSrc
                } else {
                    debugger
                    this.imgSrc = null
                    this.getSeriesImg(row)
                }
                if (this.seriesCurrentTableChecked.includes(row)) {
                    this.seriesCurrentTableChecked = this.seriesCurrentTableChecked.filter(item => item != row)
                    this.$nextTick(() => {
                        this.$refs.seriesTable.toggleRowSelection(row, false)
                    })
                } else {
                    this.seriesCurrentTableChecked.push(row)
                    this.$nextTick(() => {
                        this.$refs.seriesTable.toggleRowSelection(row, true)
                    })
                }
            } else {
                this.minNum = ''
                this.maxNum = ''
                this.imagesCurrentTableChecked = []
                this.$nextTick(() => {

                    this.$refs.imageTable.clearSelection()
                })

                this.imgSrc = null
                this.seriesCurrentTableChecked = [row]
                this.getSeriesImgList(row.id)
            }




        },
        seriesRowSignleSelection(rows) {
            console.log('数据对吗？==单选', rows);
            this.seriesCurrentTableChecked = rows


        },

        seriesRowTableAllSelection(rows) {
            console.log('数据对吗？==全选选', rows);

            this.seriesCurrentTableChecked = rows

        },

        readerPromise(fileRes) {
            return new Promise((resolve, reject) => {
                let reader = new FileReader()
                reader.readAsDataURL(fileRes)
                reader.onload = () => {
                    // console.log(reader.result)
                    resolve(reader.result)
                }
            })
        },
        async getSeriesImgList(id) {
            let res = await this.$pacsApi.pacsApi.getSeriesImgList({ series_id: id })
            let { code, data } = res

            if (code === 0) {
                if (data.length === 0) {
                    this.imagesData = []
                } else {

                    // let readerPromise = (fileRes) => {
                    //     return new Promise((resolve, reject) => {
                    //         let reader = new FileReader()
                    //         reader.readAsDataURL(fileRes)
                    //         reader.onload = () => {
                    //             // console.log(reader.result)
                    //             resolve(reader.result)
                    //         }
                    //     })
                    // }
                    // let forFn = async () => {
                    //     for (let i = 0; i < data.length; i++) {
                    //         let fileRes = await this.$pacsApi.pacsApi.getInstanceImg(data[i]['id'])
                    //         let readerResult = await readerPromise(fileRes)
                    //         // console.log('imgSrc',readerResult)
                    //         this.$set(data[i], 'imgSrc', readerResult)
                    //         // if (i == 0) {
                    //         //     this.imgSrc = readerResult
                    //         // }
                    //     }
                    // }
                    // forFn()
                    this.imagesData = data;
                    this.$forceUpdate();
                }
                this.images_count = this.imagesData.length

            }


        },


        async getInstanceImg(row) {
            let fileRes = await this.$pacsApi.pacsApi.getInstanceImg(row.id)
            let imgUrl = await this.readerPromise(fileRes)
            row.imgSrc = imgUrl
            this.imgSrc = imgUrl
        },

        async getSeriesImg(row) {
            let fileRes = await this.$pacsApi.pacsApi.getSeriesImg(row.id)
            let imgUrl = await this.readerPromise(fileRes)
            row.imgSrc = imgUrl
            this.imgSrc = imgUrl
        },
        async getSeriesInfo(id) {
            this.seriesData = []
            let res = await this.$pacsApi.pacsApi.getSeriesInfo(id)
            let { code, data } = res
            if (code === 0) {
                if (data.length === 0) {
                    this.series_count = 0
                    // this.images_count = 0
                    this.seriesData = []
                } else {
                    this.series_count = data.length
                    // this.images_count = data.reduce((totalVal, currentVal) => {
                    //     return totalVal + currentVal.images_count
                    // }, 0)
                    // let readerPromise = (fileRes) => {
                    //     return new Promise((resolve, reject) => {
                    //         let reader = new FileReader()
                    //         reader.readAsDataURL(fileRes)
                    //         reader.onload = () => {
                    //             // console.log(reader.result)
                    //             resolve(reader.result)
                    //         }
                    //     })
                    // }
                    // let forFn = async () => {
                    //     for (let i = 0; i < data.length; i++) {
                    //         let fileRes = await this.$pacsApi.pacsApi.getSeriesImg(data[i]['id'])
                    //         let readerResult = await readerPromise(fileRes)
                    //         // console.log('imgSrc',readerResult)
                    //         this.$set(data[i], 'imgSrc', readerResult)
                    //         // if (i == 0) {
                    //         //     this.imgSrc = readerResult
                    //         // }
                    //     }
                    // }
                    // forFn()
                    // data.forEach(item => {
                    //     item.isDelImgShow = false;
                    // });
                    this.seriesData = data;

                    if (this.seriesData.length > 0) {
                        this.$nextTick(() => {
                            this.$refs.seriesTable.clearSelection()
                            this.seriesCurrentTableChecked = [this.seriesData[0]]
                            this.$refs.seriesTable.toggleRowSelection(this.seriesData[0], true)
                        })
                        this.getSeriesImg(this.seriesData[0])
                        //this.seriesData[0]
                        if (this.type == 2) {
                            this.getSeriesImgList(this.seriesData[0].id)
                        }

                    }

                    // this.curSeriesData = data[0]
                    // this.$forceUpdate();
                }
            }
        },
        toImgViewerPage(rowData) {
            this.getViewUrl(rowData)
        },
        async getViewUrl(rowData) {
            // console.log(rowData)
            var _this = this
            var newArr = []
            newArr.push(rowData.id)
            let usee_world_view = (this.setObj && this.setObj.param_value) || false
            let StartDoubleScreen = (this.setObj && this.setObj.start_doubleScreen) || false
            // 启用双屏插件
            var data = {
                study_ids: newArr,
                usee_world_view: usee_world_view
            }
            this.$pacsApi.pacsApi.getViewUrl(data).then(res => {
                if (res.code === 0) {
                    if (!usee_world_view && StartDoubleScreen) { // 启用双屏
                        // var data = {
                        //   performed_procedure_ids: newArr,
                        //   UseeWorldView: UseeWorldView
                        // }
                        const title = rowData.patient_name + '-' + rowData.patient_sex + '-' + rowData.patient_age + '-' + row.modalities_in_study
                        const url = _this.BacsUrl + '/s/' + res.data
                        const doubleURL = this.BacsUrl + '/s' + res.data + '||:' + title
                        var manager = new Mgr()
                        manager.getRole().then(function (logindata) {
                            if (process.env.NODE_ENV === 'development') {
                                _this.postOpenWindow('eworldimageview:\\' + doubleURL, '_blank')
                                // window.open('eworldimageview:\\' + _this.BacsUrl + '/eworldimageview.html?href=' + res.data + '&Token=' + encodeURI(JSON.stringify(Token)))
                            } else {
                                _this.postOpenWindow('eworldimageview:\\' + doubleURL, '_blank')
                                // window.open('eworldimageview:\\' + _this.BacsUrl + '/cloudpacs/eworldimageview.html?href=' + res.data + '&Token=' + encodeURI(JSON.stringify(Token)))
                            }
                        })
                    } else if (usee_world_view) {
                        window.open(res.data)
                    } else {
                        window.open(configUrl.frontEndUrl + '/s/' + res.data)
                    }
                } else {
                    this.$message.error(res.msg)
                }
            })
        },
    },
}
</script>
<style lang='less' scoped>
.imgDeleteDialog {
    ::v-deep .el-dialog__footer {
        border-top: 1px solid #EBEEF5;

    }

    /deep/ .el-table__body tr.current-row>td {
        // 色值待确定
        background-color: #0a70b0;
        color: white;
    }
}

.el-dialog__body {
    // padding: 0px;
    // border-bottom: 1px solid #EBEEF5;

}

.footer_select_title {
    font-weight: 400;
    font-size: 14px;
    color: #FF6F6F;
}

.column {
    display: flex;
    flex-direction: column;
}

.row_start_center {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.patient_info {
    border-radius: 3px;
    background-color: #F0F4F9;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 5px;
    width: calc(100% - 20px);

    .patient_info_msg {
        padding-right: 5px;
        width: calc(100% - 20px);
        display: flex;



        &_item {
            display: flex;
            flex-direction: column;
            justify-content: start;
            overflow: hidden;
            flex: 1;

            height: 100%;

            .label-title {
                width: 70px;
                // height: 25px;
                text-align-last: justify;
                text-align: justify;
            }

            &-content {
                // height: 30px;
                // width: calc(100% - 70px);
                max-width: 103px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                cursor: pointer;
            }

            p {
                width: 100%;
                height: 30px;
                white-space: nowrap;
                text-overflow: ellipsis;
            }

        }
    }
}

.del_content {
    // padding: 0px 20px;
    background-color: white;
    //  #EBEEF5;
    // padding-top: 20px;
    max-height: 800px;

}

.del_middle {
    width: 3px;
    height: 100%;
    background-color: #EBEEF5;

}

.row_start {
    // justify-content: start;
    align-items: flex-start;
}

.del_left {
    background-color: white;
    width: 570px;
    height: 100%;

}

.del_right {
    background-color: white;
    width: 288px;
    height: calc(100% - 200px);
    padding: 10px;
    margin-left: 2px;
    border-left: 2px solid #EBEEF5;

    //     .del_right_img {
    //         height: calc(100% - 150px);
    //     }
}

.mt3 {
    margin-top: 3px;
}

.del_bottom {
    border-top: 1px dashed #DCDFE6;
    // width: 570px;

    .pwd_class {
        margin-left: 38px;
    }

    .el-form-item {
        margin-right: 0px !important;
        margin-bottom: 0px !important;
    }

    ::v-deep .el-form-item__label,
    ::v-deep .el-form-item__content {
        line-height: 34px !important;
    }

    ::v-deep .el-form-item__error {
        display: none;
    }
}

.imgLoadFail {
    width: 94px;
    height: 90px;
    background: url("../../../assets/images/pacs/imgLoadFail.png") no-repeat;
    background-size: 100% 100%;
}

.noImg {
    width: 58px;
    height: 90px;
    background: url("../../../assets/images/pacs/noImg.png") no-repeat;
    background-size: 100% 100%;
}

.fw500 {
    font-weight: 500;
    font-size: 16px;
    color: #303133;
}

.img_title {
    font-weight: 500;
    font-size: 14px;
    color: #303133;
    line-height: 24px;
}

.num_range {
    display: inline;

    .el-input {
        display: inline;

    }

    ::v-deep .el-input__inner {
        width: 80px;
        line-height: 34px;
        height: 34px;

    }

    .el-button {
        height: 34px;
    }


    .el-button--select_button {
        border: 1px solid #DCDFE6;
        color: #0A70B0;
        background-color: white;
        padding: 10px 5px;
        font-weight: 400;
        font-size: 13px;
        width: 60px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;


        &:focus {
            background-color: #1C8BE4;
            color: #fff;

        }

        &:hover {
            background-color: #1C8BE4;
            color: #fff;
        }

        &:active {
            background-color: #1C8BE4;
            color: #fff;

        }

        //借助是否朴素按钮来实现默认选中样式
        &.is-disabled,
        &.is-disabled:focus,
        &.is-disabled:hover {
            color: #C0C4CC;
        }
    }
}

.del_right_img {
    background-color: black;
    //  #DCDFE6;
}
</style>